<template>
  <el-dialog :model-value="show" center width="60%" @close="onClose">
    <el-scrollbar height="43rem">
      <component :is="useDefault ? DefaultTermsOfUseContent : TermsOfUseContent" />
    </el-scrollbar>
    <template #footer>
      <el-button type="primary" @click="onClose">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import ASC from '/app_settings_core'
import DefaultTermsOfUseContent from './DefaultTermsOfUseContent.vue'
import { ref, onMounted, defineAsyncComponent } from 'vue'

defineProps({
  show: {
    type: Boolean,
    default: false,
    required: true
  }
})
const emits = defineEmits(['close'])

/**
 * 关闭时调用父组件的事件
 */
function onClose() {
  emits('close')
}

// 按需加载
const useDefault = ref(true)
let TermsOfUseContent = null
onMounted(() => {
  if (ASC.settings.termsOfUseSettled) {
    useDefault.value = false
    TermsOfUseContent = defineAsyncComponent(() => import('/src/custom/components/TermsOfUse/TermsOfUseContent.vue'))
  }
})
</script>
